<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档中心</title>
    <link rel="shortcut icon" href="./images/logo.ico" />
    <script src="./js/tw.js"></script>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/doc.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6200EE',
                        secondary: '#EDE7F6'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>

</head>

<body style="background: #F9FAFB;">
    <div id="app">
        <div class="h-screen" style="display: flex;">
            <!-- 左侧导航 -->
            <div id="sidebar" class="sidebar">
                <div class="" style="border-bottom: 1px solid #e0e0e0;padding: 20px;">
                    <div class="">{{message}}</div>
                </div>
                <nav class="" style="padding: 20px;">
                    <ul>
                        <template v-for="(item, index) in menus" :key="index">
                            <li>
                                <div class="" style="padding: 10px 0;">
                                    <span>{{item.title}}</span>
                                </div>
                                <ul class="">
                                    <template v-for="(son, index2) in item.child" :key="index2">
                                        <li style="cursor: pointer;font-size: 14px;"
                                            :class="[activeMenu === son.id ? 'activeMenu':'noactive']"
                                            @click="setActiveMenu(son.id)">{{son.title}}</li>
                                    </template>
                                </ul>
                            </li>
                        </template>
                    </ul>
                </nav>
            </div>
            <!-- 右侧内容 -->
            <div class="" id="contentview" style="overflow-y:scroll;width: 100%;">
                <div style="padding: 20px 60px;">
                    <div id="1-1" class="content">
                        1
                    </div>
                    <div id="1-2" class="content">
                        2
                    </div>
                    <div id="1-3" class="content">
                        3
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const { createApp, ref } = Vue

    createApp({
        setup() {
            const message = ref('卓越智能体文档')
            const menus = ref([
                { id: '1', title: '一级目录1', child: [{ id: '1-1', title: '二级目录1' }, { id: '1-2', title: '二级目录2' }, { id: '1-3', title: '二级目录3' }] },
                { id: '2', title: '一级目录2', child: [{ id: '2-1', title: '二级目录1' }, { id: '2-2', title: '二级目录2' }, { id: '2-3', title: '二级目录3' }] },
            ])
            const activeMenu = ref('1-1')
            const scrollToDiv = (id) => {
                const traget = document.getElementById(id);
                traget.scrollIntoView({ behavior: "auto", block: "start" });
            }
            const setActiveMenu = (id) => {
                activeMenu.value = id
                scrollToDiv(id)
            }
            return {
                message,
                setActiveMenu,
                activeMenu,
                menus
            }
        }
    }).mount('#app')
</script>

</html>